<template>
  <div class="login-container">
    <!-- 左侧品牌展示区域 -->
    <div class="brand-section">
      <div class="brand-content">
        <!-- 广告图片区域 -->
        <div class="image-section">
          <div class="image-wrapper">
            <img
              src="/images/login_bg2.png"
              alt="鸥鹏超级面试官"
              class="brand-image"
              @error="handleImageError"
              @load="handleImageLoad"
            />
            <div class="image-fallback" v-show="imageError">
              <div class="fallback-icon">🎓</div>
              <div class="fallback-title">鸥鹏超级面试官</div>
              <div class="fallback-subtitle">高校学生就业管理系统</div>
            </div>
          </div>
        </div>

        <!-- 品牌信息区域 -->
        <div class="brand-info">
          <h1 class="brand-title">鸥鹏超级面试官</h1>
          <p class="brand-subtitle">高校学生就业管理系统</p>
          <div class="brand-features">
            <div class="feature-item">
              <div class="feature-icon">📝</div>
              <div class="feature-text">
                <h4>智能简历制作</h4>
                <p>AI辅助简历优化</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon">🎯</div>
              <div class="feature-text">
                <h4>模拟面试训练</h4>
                <p>真实场景模拟</p>
              </div>
            </div>
            <div class="feature-item">
              <div class="feature-icon">📊</div>
              <div class="feature-text">
                <h4>就业数据分析</h4>
                <p>精准就业指导</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧登录表单区域 -->
    <div class="form-section">
      <!-- 主题切换按钮 -->
      <div class="theme-toggle-wrapper">
        <ThemeToggle />
      </div>

      <div class="form-container">
        <!-- 表单头部 -->
        <div class="form-header">
          <div class="logo-section">
            <div class="logo-icon">🎓</div>
            <div class="logo-text">
              <h2 class="welcome-title">欢迎登录</h2>
              <p class="welcome-subtitle">请输入您的账号信息</p>
            </div>
          </div>
        </div>

        <!-- 登录表单 -->
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login-form"
          @keyup.enter="handleLogin"
        >
          <el-form-item prop="username" class="form-item">
            <label class="field-label">账号</label>
            <el-input
              v-model="loginForm.username"
              placeholder="请输入学号/用户名/手机号/邮箱"
              size="large"
              prefix-icon="User"
              clearable
              class="form-input"
            />
            <div class="login-tips">
              <el-text size="small" type="info">
                支持学号、用户名、手机号、邮箱登录
              </el-text>
            </div>
          </el-form-item>

          <el-form-item prop="password" class="form-item">
            <label class="field-label">密码</label>
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              size="large"
              prefix-icon="Lock"
              show-password
              clearable
              class="form-input"
            />
          </el-form-item>

          <div class="form-options">
            <el-checkbox v-model="rememberMe" class="remember-checkbox">
              记住我
            </el-checkbox>
            <a href="#" class="forgot-password">忘记密码？</a>
          </div>

          <el-form-item class="submit-item">
            <el-button
              type="primary"
              size="large"
              class="login-btn"
              :loading="loading"
              @click="handleLogin"
            >
              {{ loading ? '登录中...' : '立即登录' }}
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 快速登录和注册 -->
        <div class="form-footer">
          <div class="divider">
            <span class="divider-text">或者</span>
          </div>

          <div class="quick-login">
            <p class="quick-title">快速体验账户</p>
            <div class="quick-accounts">
              <el-button
                class="quick-btn admin-btn"
                @click="quickLogin('admin', 'admin123')"
              >
                <span class="btn-icon">👨‍💼</span>
                <span class="btn-text">管理员</span>
              </el-button>
              <el-button
                class="quick-btn teacher-btn"
                @click="quickLogin('teacher001', 'teacher123')"
              >
                <span class="btn-icon">👨‍🏫</span>
                <span class="btn-text">老师</span>
              </el-button>
              <el-button
                class="quick-btn student-btn"
                @click="quickLogin('zhangsan2024', '123456')"
              >
                <span class="btn-icon">👨‍🎓</span>
                <span class="btn-text">学生</span>
              </el-button>
            </div>
          </div>

          <div class="register-section">
            <p class="register-text">
              还没有账号？
              <router-link to="/register" class="register-link">立即注册</router-link>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '@/stores/user'
import ThemeToggle from '@/components/ThemeToggle.vue'
import type { LoginForm } from '@/types'

const router = useRouter()
const userStore = useUserStore()

// 表单引用
const loginFormRef = ref<FormInstance>()

// 加载状态
const loading = ref(false)
const rememberMe = ref(false)
const imageError = ref(false)

// 登录表单
const loginForm = reactive<LoginForm>({
  username: '',
  password: ''
})

// 表单验证规则
const loginRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ]
}

// 处理登录
const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
    loading.value = true
    
    await userStore.login(loginForm)
    
    ElMessage.success('登录成功')
    
    // 跳转到仪表盘
    router.push('/dashboard')
  } catch (error) {
    console.error('Login error:', error)
  } finally {
    loading.value = false
  }
}

// 快速登录
const quickLogin = (username: string, password: string) => {
  loginForm.username = username
  loginForm.password = password
  handleLogin()
}

// 图片处理
const handleImageError = () => {
  imageError.value = true
  console.warn('登录背景图片加载失败，使用备用方案')
}

const handleImageLoad = () => {
  imageError.value = false
}
</script>

<style lang="scss" scoped>
// 主容器
.login-container {
  min-height: 100vh;
  display: flex;
  background: var(--bg-color-page);
  overflow: hidden;
  transition: background-color 0.3s ease;
}

// 左侧品牌展示区域
.brand-section {
  flex: 0 0 55%;
  background: url('/images/login_bg3.png') center center / cover no-repeat,
              linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  // 添加深色半透明遮罩层，营造优雅氛围
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

  // 添加额外的暗化层，进一步调暗背景
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0.4) 100%
    );
    z-index: 2;
  }

  .brand-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 500px;
    padding: 30px 25px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;

    // 增强文字阴影，提高可读性
    text-shadow:
      0 2px 8px rgba(0, 0, 0, 0.7),
      0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

// 图片区域
.image-section {
  margin-bottom: 30px;

  .image-wrapper {
    position: relative;
    display: inline-block;
    max-width: 380px;
    width: 100%;

    .brand-image {
      width: 100%;
      height: auto;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      padding: 25px;
      box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 15px 30px rgba(0, 0, 0, 0.3),
        0 5px 15px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.3);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        transform: translateY(-10px) scale(1.03);
        box-shadow:
          0 40px 80px rgba(0, 0, 0, 0.5),
          0 20px 40px rgba(0, 0, 0, 0.4),
          0 8px 20px rgba(0, 0, 0, 0.3),
          0 0 0 1px rgba(255, 255, 255, 0.4);
        background: rgba(255, 255, 255, 1);
      }
    }

    .image-fallback {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
      border-radius: 20px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #667eea;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);

      .fallback-icon {
        font-size: 80px;
        margin-bottom: 20px;
      }

      .fallback-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 8px;
      }

      .fallback-subtitle {
        font-size: 16px;
        opacity: 0.8;
      }
    }
  }
}

// 品牌信息
.brand-info {
  .brand-title {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #ffffff;
    text-shadow:
      0 3px 6px rgba(0, 0, 0, 0.8),
      0 6px 12px rgba(0, 0, 0, 0.6),
      0 1px 0 rgba(0, 0, 0, 0.9);
    letter-spacing: -1px;
    line-height: 1.2;

    // 添加发光效果
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.4));
  }

  .brand-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 25px;
    font-weight: 400;
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.8),
      0 4px 8px rgba(0, 0, 0, 0.6);
  }

  .brand-features {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;

    .feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 12px 8px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      flex: 1;
      min-width: 0;

      &:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-4px);
        box-shadow:
          0 10px 24px rgba(0, 0, 0, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.4);
      }

      .feature-icon {
        font-size: 24px;
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: transform 0.3s ease;
      }

      &:hover .feature-icon {
        transform: scale(1.1) rotate(5deg);
      }

      .feature-text {
        flex: 1;

        h4 {
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 4px;
          color: #ffffff;
          line-height: 1.3;
          text-shadow:
            0 2px 4px rgba(0, 0, 0, 0.8),
            0 1px 0 rgba(0, 0, 0, 0.9);
        }

        p {
          font-size: 11px;
          color: rgba(255, 255, 255, 0.95);
          line-height: 1.3;
          margin: 0;
          text-shadow:
            0 1px 3px rgba(0, 0, 0, 0.7),
            0 2px 6px rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
}

// 右侧表单区域
.form-section {
  flex: 0 0 45%;
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.3s ease;

  .theme-toggle-wrapper {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
  }

  .form-container {
    width: 100%;
    max-width: 420px;
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
  }
}

// 表单头部
.form-header {
  margin-bottom: 48px;
  text-align: left;

  .logo-section {
    display: flex;
    align-items: center;
    gap: 16px;

    .logo-icon {
      width: 56px;
      height: 56px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: white;
      box-shadow:
        0 8px 16px rgba(102, 126, 234, 0.2),
        0 4px 8px rgba(102, 126, 234, 0.1);
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        transform: translateY(-2px) scale(1.05);
        box-shadow:
          0 12px 24px rgba(102, 126, 234, 0.25),
          0 6px 12px rgba(102, 126, 234, 0.15);
      }
    }

    .logo-text {
      flex: 1;

      .welcome-title {
        font-size: 36px;
        font-weight: 800;
        margin: 0 0 4px 0;
        color: var(--text-color-primary);
        letter-spacing: -1px;
        line-height: 1.1;
        transition: color 0.3s ease;
      }

      .welcome-subtitle {
        font-size: 16px;
        color: var(--text-color-secondary);
        margin: 0;
        font-weight: 400;
        letter-spacing: 0.2px;
        transition: color 0.3s ease;
      }
    }
  }
}

// 登录表单
.login-form {
  margin-bottom: 40px;

  .form-item {
    margin-bottom: 32px;

    .field-label {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: var(--text-color-primary);
      margin-bottom: 12px;
      letter-spacing: 0.2px;
      transition: color 0.3s ease;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .form-input {
    :deep(.el-input__wrapper) {
      border-radius: 12px;
      border: 1px solid var(--border-color);
      box-shadow: none;
      transition: all 0.3s ease;
      background: var(--input-bg);

      &:hover {
        border-color: var(--input-border-hover);
        background: var(--bg-color);
      }

      &.is-focus {
        border-color: var(--color-primary);
        background: var(--bg-color);
        box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.08);
      }
    }

    :deep(.el-input__inner) {
      font-size: 16px;
      padding: 16px 20px;
      height: 52px;
      color: var(--text-color-primary);
      font-weight: 400;

      &::placeholder {
        color: var(--input-placeholder);
        font-weight: 400;
      }
    }

    :deep(.el-input__prefix) {
      left: 16px;
      color: var(--text-color-secondary);
    }
  }

  .login-tips {
    margin-top: 4px;
    text-align: center;

    .el-text {
      color: #909399;
      font-size: 12px;
    }
  }

  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;

    .remember-checkbox {
      :deep(.el-checkbox__label) {
        font-size: 14px;
        color: #6b7280;
      }

      :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
        background-color: #667eea;
        border-color: #667eea;
      }
    }

    .forgot-password {
      font-size: 14px;
      color: #667eea;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s ease;

      &:hover {
        color: #764ba2;
        text-decoration: underline;
      }
    }
  }

  .submit-item {
    margin-bottom: 0;
  }

  .login-btn {
    width: 100%;
    height: 56px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow:
      0 8px 20px rgba(102, 126, 234, 0.2),
      0 4px 10px rgba(102, 126, 234, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;

    &:hover {
      transform: translateY(-3px);
      box-shadow:
        0 20px 40px rgba(102, 126, 234, 0.3),
        0 10px 20px rgba(102, 126, 234, 0.2);
    }

    &:active {
      transform: translateY(-1px);
    }

    // 按钮光效动画
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.6s ease;
    }

    &:hover::before {
      left: 100%;
    }
  }
}

// 表单底部
.form-footer {
  .divider {
    position: relative;
    text-align: center;
    margin: 40px 0;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: 1px;
      background: #e5e7eb;
    }

    .divider-text {
      background: #ffffff;
      padding: 0 24px;
      font-size: 14px;
      color: #9ca3af;
      position: relative;
      z-index: 1;
      font-weight: 500;
    }
  }

  .quick-login {
    margin-bottom: 40px;
    text-align: center;

    .quick-title {
      font-size: 14px;
      color: #6b7280;
      margin-bottom: 24px;
      font-weight: 500;
      letter-spacing: 0.2px;
    }

    .quick-accounts {
      display: flex;
      gap: 12px;
      justify-content: center;

      .quick-btn {
        flex: 1;
        height: 44px;
        border-radius: 8px;
        border: 1px solid #d1d5db;
        background: #ffffff;
        font-weight: 500;
        transition: all 0.3s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        position: relative;
        overflow: hidden;

        .btn-icon {
          font-size: 16px;
        }

        .btn-text {
          font-size: 11px;
          font-weight: 500;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
          background: white;
        }

        &.admin-btn:hover {
          border-color: #6366f1;
          color: #6366f1;
        }

        &.teacher-btn:hover {
          border-color: #10b981;
          color: #10b981;
        }

        &.student-btn:hover {
          border-color: #f59e0b;
          color: #f59e0b;
        }

        // 按钮波纹效果
        &::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          width: 0;
          height: 0;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 50%;
          transform: translate(-50%, -50%);
          transition: all 0.4s ease;
        }

        &:hover::after {
          width: 300px;
          height: 300px;
        }
      }
    }
  }

  .register-section {
    text-align: center;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;

    .register-text {
      font-size: 14px;
      color: #6b7280;
      margin: 0;

      .register-link {
        color: #667eea;
        text-decoration: none;
        font-weight: 600;
        margin-left: 4px;
        transition: color 0.3s ease;

        &:hover {
          color: #764ba2;
          text-decoration: underline;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .brand-section {
    .brand-content {
      padding: 50px 30px;
      max-width: 500px;
    }

    .image-section {
      margin-bottom: 40px;

      .image-wrapper {
        max-width: 350px;

        .brand-image {
          padding: 25px;
        }
      }
    }

    .brand-info {
      .brand-title {
        font-size: 40px;
      }

      .brand-features {
        max-width: 350px;

        .feature-item {
          padding: 16px;

          .feature-icon {
            width: 45px;
            height: 45px;
            font-size: 28px;
          }
        }
      }
    }
  }

  .form-section {
    width: 450px;

    .form-container {
      padding: 40px 30px;
    }
  }
}

@media (max-width: 768px) {
  .login-container {
    flex-direction: column;
    background: white;
  }

  .brand-section {
    flex: none;
    min-height: 45vh;

    .brand-content {
      padding: 40px 20px;
      max-width: 100%;
    }

    .image-section {
      margin-bottom: 30px;

      .image-wrapper {
        max-width: 280px;

        .brand-image {
          padding: 20px;
          border-radius: 16px;
        }

        .image-fallback {
          padding: 30px;
          border-radius: 16px;

          .fallback-icon {
            font-size: 60px;
          }

          .fallback-title {
            font-size: 20px;
          }

          .fallback-subtitle {
            font-size: 14px;
          }
        }
      }
    }

    .brand-info {
      .brand-title {
        font-size: 32px;
        margin-bottom: 12px;
      }

      .brand-subtitle {
        font-size: 16px;
        margin-bottom: 30px;
      }

      .brand-features {
        gap: 16px;
        max-width: 100%;

        .feature-item {
          padding: 16px;

          .feature-icon {
            width: 40px;
            height: 40px;
            font-size: 24px;
          }

          .feature-text {
            h4 {
              font-size: 16px;
              margin-bottom: 6px;
            }

            p {
              font-size: 13px;
            }
          }
        }
      }
    }
  }

  .form-section {
    width: 100%;
    min-height: 55vh;
    box-shadow: none;

    .form-container {
      padding: 30px 20px 40px;
      max-width: 380px;
    }
  }

  .form-header {
    margin-bottom: 30px;

    .logo-section {
      gap: 12px;

      .logo-icon {
        width: 50px;
        height: 50px;
        font-size: 28px;
      }

      .logo-text {
        .welcome-title {
          font-size: 26px;
        }

        .welcome-subtitle {
          font-size: 14px;
        }
      }
    }
  }

  .login-form {
    margin-bottom: 30px;

    .form-item {
      margin-bottom: 24px;

      .field-label {
        font-size: 13px;
        margin-bottom: 6px;
      }
    }

    .form-input {
      :deep(.el-input__inner) {
        font-size: 16px;
        padding: 14px 18px;
      }
    }

    .form-options {
      margin-bottom: 28px;

      .remember-checkbox :deep(.el-checkbox__label) {
        font-size: 13px;
      }

      .forgot-password {
        font-size: 13px;
      }
    }

    .login-btn {
      height: 52px;
      font-size: 15px;
    }
  }

  .form-footer {
    .divider {
      margin: 28px 0;
    }

    .quick-login {
      margin-bottom: 28px;

      .quick-accounts {
        flex-direction: column;
        gap: 12px;

        .quick-btn {
          height: 44px;

          .btn-icon {
            font-size: 16px;
          }

          .btn-text {
            font-size: 11px;
          }
        }
      }
    }

    .register-section {
      padding-top: 20px;

      .register-text {
        font-size: 13px;
      }
    }
  }
}

@media (max-width: 480px) {
  .brand-section {
    min-height: 40vh;

    .brand-content {
      padding: 30px 15px;
    }

    .image-section {
      margin-bottom: 25px;

      .image-wrapper {
        max-width: 220px;

        .brand-image {
          padding: 15px;
          border-radius: 12px;
        }

        .image-fallback {
          padding: 20px;
          border-radius: 12px;

          .fallback-icon {
            font-size: 50px;
            margin-bottom: 15px;
          }

          .fallback-title {
            font-size: 18px;
          }

          .fallback-subtitle {
            font-size: 13px;
          }
        }
      }
    }

    .brand-info {
      .brand-title {
        font-size: 26px;
        margin-bottom: 10px;
      }

      .brand-subtitle {
        font-size: 14px;
        margin-bottom: 25px;
      }

      .brand-features {
        gap: 12px;

        .feature-item {
          padding: 12px;

          .feature-icon {
            width: 36px;
            height: 36px;
            font-size: 20px;
          }

          .feature-text {
            h4 {
              font-size: 14px;
              margin-bottom: 4px;
            }

            p {
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .form-section {
    .form-container {
      padding: 25px 15px 35px;
      max-width: 100%;
    }
  }

  .form-header {
    margin-bottom: 25px;

    .logo-section {
      gap: 10px;

      .logo-icon {
        width: 45px;
        height: 45px;
        font-size: 24px;
      }

      .logo-text {
        .welcome-title {
          font-size: 22px;
        }

        .welcome-subtitle {
          font-size: 13px;
        }
      }
    }
  }

  .login-form {
    margin-bottom: 25px;

    .form-item {
      margin-bottom: 20px;

      .field-label {
        font-size: 12px;
        margin-bottom: 5px;
      }
    }

    .form-input {
      :deep(.el-input__inner) {
        font-size: 15px;
        padding: 12px 16px;
      }
    }

    .form-options {
      margin-bottom: 24px;

      .remember-checkbox :deep(.el-checkbox__label) {
        font-size: 12px;
      }

      .forgot-password {
        font-size: 12px;
      }
    }

    .login-btn {
      height: 48px;
      font-size: 14px;
    }
  }

  .form-footer {
    .divider {
      margin: 24px 0;

      .divider-text {
        font-size: 13px;
        padding: 0 12px;
      }
    }

    .quick-login {
      margin-bottom: 24px;

      .quick-title {
        font-size: 13px;
        margin-bottom: 16px;
      }

      .quick-accounts {
        gap: 10px;

        .quick-btn {
          height: 40px;

          .btn-icon {
            font-size: 14px;
          }

          .btn-text {
            font-size: 10px;
          }
        }
      }
    }

    .register-section {
      padding-top: 18px;

      .register-text {
        font-size: 12px;
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// 应用动画
.login-container {
  animation: fadeIn 0.5s ease-out;
}

.brand-section {
  animation: slideInLeft 0.8s ease-out;
}

.form-section {
  animation: slideInRight 0.8s ease-out;
}

.image-section {
  animation: fadeInUp 1.2s ease-out 0.3s both;
}

.brand-info {
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.form-header {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.login-form {
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.form-footer {
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

// 特殊动画效果
.brand-image {
  animation: fadeIn 1.5s ease-out 0.5s both;
}

.feature-item {
  &:nth-child(1) {
    animation: fadeInUp 0.8s ease-out 0.8s both;
  }

  &:nth-child(2) {
    animation: fadeInUp 0.8s ease-out 1.0s both;
  }

  &:nth-child(3) {
    animation: fadeInUp 0.8s ease-out 1.2s both;
  }
}
</style>
